.myhome {
    .header {
        background-color: rgb(255, 255, 255);
        height: 7vh;
        display: flex;
        align-items: center;

        .logo {
            margin-left: 30px;

            img {
                height: 50px;
            }

        }

        .tab {
            flex: 1;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background-color: #fff;
            display: flex;
            margin-left: 30%;

            .tab-item {
                width: 100px;
                font-size: 16px;
                line-height: 7vh;
                text-align: center;
            }

            .tab-item:hover {
                background-color: rgb(239, 238, 238);
            }
        }

        .searchBtn {
            flex: 1;
            display: flex;
            width: 300px;
        }

        ::v-deep .el-button--default {
            background-color: red;
            color: white;
            border-radius: 0 5px 5px 0;
        }

        .userinfo {
            display: flex;
            flex: 0.5;
            margin-left: 80px;

            .username {
                font-size: 18px;
                padding-top: 5px;
                padding-right: 12px;
            }

            .exit {
                color: rgb(95, 91, 91);
                border: none;
                background-color: #fff;
                margin-left: 20px;
                font-size: 16px;
            }

            .exit:hover {
                color: rgb(161, 159, 159);
            }
        }

        .gotologin {
            flex: 0.5;
            text-decoration: none;
            color: black;
        }

        .gotologin:hover {
            color: rgb(161, 159, 159);
        }
    }

    .content {
        height: 100%;
        overflow: hidden;

        //轮播图样式
        ::v-deep .el-carousel--horizontal {
            width: 100%;
        }

        ::v-deep .rightImg {
            width: 100%;
            height: 100%;
        }

        .listinfo {
            color: black;
        }

        // 小区风景图
        .sights-photo {
            width: 70%;
            margin: 0 auto;

            h1 {
                color: rgb(107, 76, 42);
            }

            h3 {
                font-weight: 400;
                margin-top: 25px;
            }

            .img-list {
                margin-top: 60px;

                img {
                    width: 100%;
                }
            }
        }
    }

    .el-pagination {
        white-space: nowrap;
        padding: 10px 40%;
        color: #303133;
        font-weight: 700;
    }

    .card-list {
        width: 80%;
        margin: 30px auto;
        display: flex;
        flex-wrap: wrap;

        .card-item {
            width: 300px;
            height: 400px;
            margin: 30px 0 0 110px;
            border: 1px solid rgb(237, 236, 236);
            border-radius: 5px 5px 5px 5px;
            background-color: rgb(254, 251, 251);

            .card-img {
                width: 302px;
                height: 300px;
                position: relative;
                right: 1px;
                bottom: 1px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px 5px 0 0;
                }
            }

            .card-title {
                padding-left: 10px;
                margin-top: 20px;
                color: rgb(40, 38, 38);
            }

            .card-bottom {
                padding: 0 10px 0 10px;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;

                .card-text {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 75%;
                    color: rgb(109, 106, 106);
                    font-size: 14px;
                }
            }
        }
    }

    .comment {
        width: 80%;
        margin: auto;
        flex-wrap: wrap;
        border: 1px solid rgb(237, 236, 236);
        border-radius: 5px 5px 5px 5px;
        background-color: rgb(254, 251, 251);

        .title {
            padding: 30px 0 30px 50%
        }

        .block {
            padding: 0 0 20px 20%;
            width: 60%;
            height: 600px;
            overflow: auto
        }

        .input-text {
            padding: 30px 20% 10% 20%;

        }


    }

    .footer {
        margin-top: 500spx;
        background-color: rgb(34, 33, 33);

        img {
            height: 100%;
            width: 100%;
        }
    }

    .el-card {
        height: 50%;
        width: 50%;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }


    ::v-deep .el-button {
        width: 65px;
        height: 35px;
        font-size: 12px;
        display: flex;
        justify-content: center;
    }


    ::v-deep .el-button--text {
        width: 50px;

    }

    ::v-deep .el-carousel__indicators--outside {
        background: white;
    }

    ::v-deep .el-descriptions {
        margin: 0 auto;
        width: 80%;
    }

    ::v-deep .el-descriptions__body {
        background-color: rgb(239, 238, 238);
        padding: 25px 25px 10px 25px;
    }
}